<template>
    <article>
        <header>步骤条</header>
        <section>
            <header>样式</header>
            <div>
                <cv-steps :active="active" c="steps default medium">
                    <cv-step name="步骤一" description="这是一段很长很长很长的描述性文字" c="step"></cv-step>
                    <cv-step name="步骤二" description="这是一段很长很长很长的描述性文字" c="step"></cv-step>
                    <cv-step name="步骤三" description="这段就没那么长了" c="step"></cv-step>
                </cv-steps>
                <cv-steps :active="active" c="steps default medium center">
                    <cv-step name="步骤一" description="这是一段很长很长很长的描述性文字" c="step"></cv-step>
                    <cv-step name="步骤二" description="这是一段很长很长很长的描述性文字" c="step"></cv-step>
                    <cv-step name="步骤三" description="这段就没那么长了" c="step"></cv-step>
                </cv-steps>
            </div>
        </section>
    </article>
</template>

<script>
    export default {
        name: "ExampleSteps",
        data() {
            return {
                active: 2
            }
        }
    };
</script>

<style scoped>
    .steps {
        max-width: 1000px;
        padding: 10px 0;
    }
</style>
